import { StackNavigator, TabNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { SectionList, Dimensions, Platform, StyleSheet, Text, View, Image, Button, FlatList, TouchableHighlight } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import NetUtils from './NetUtils';
import { AsyncStorage } from 'react-native';
import storage from './LoginPage'
var username;
var password;
var url = 'http://119.29.13.173:8000/api';
var opts ={};

global.storage.load({key:'token'}).then(ret=>{
    username = ret.username;
    password = ret.password;
});


var {width, height} = Dimensions.get('window');
var dataAry = [];
var day = new Date();
var missionColor = new Array("rgb(59,99,127)", "rgb(193,230,255)", "rgb(118,199,255)", "rgb(97,115,127)", "rgb(94,159,204)");
var missionIndex = 0;

var opts = {};
class TimeAxisScreen extends React.Component {
    backLatest=() => {
        this.props.navigation.goBack();
    }
    static navigationOptions = {
        headerTitle: '时间轴',
        headerRight: <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => alert('Hello')}><Image source={require('./../res/icon/reminder-icon.png')} style={{
            margin: 10
        }}/></TouchableHighlight>,
        headerTitleStyle: {
            fontWeight: 'normal',
            color: '#2196F7',
            alignSelf: 'center'
        },
    };
    constructor(props) {
        super(props);
        this.state = {
            dataAry: dataAry,
            datas: [],
        }
    }
    _renderItem = (info) => {
        missionIndex = (missionIndex+1)%5;
        txt = info.item.content;
        return (
            <View style={{
                flexDirection: "row",
                height: 50
            }}>
            <View style={{
                flex: 1,
                backgroundColor: missionColor[missionIndex % 5]
            }}/>
            <View style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
              <Text>{info.item.date}</Text>
            </View>
            <View style={{
                flex: 2,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
              <Text>{info.item.content}</Text>
            </View>
          </View>
        )
    }

    _sectionComp = (info) => {
        var txt = info.section.key;
        return <Text
            style={{
                height: 50,
                textAlign: 'right',
                textAlignVertical: 'center',
                backgroundColor: 'rgb(233,233,239)',
                color: '#2196F7',
                fontSize: 30
            }}>{txt}</Text>
    }

    componentDidMount() {
        var datas = [];
        var map = new Map(); 
         //根据获取的数据创建map
            var service = 'query_time_shaft';
            opts = {
                username: username,
            };
            NetUtils.post(url, service, opts, (data) => {
                for (var i in data.goal) {
                    let begind = data.goal[i].beginDate.split("-");
                    //let begindd = new Date(parseInt(d[0]),parseInt(d[1])-1,parseInt(d[2])); 
                    let endd = data.goal[i].endDate.split("-");

                    let m = parseInt(begind[0]) + '年' + parseInt(begind[1]) + '月';

                    var tmp = [];
                    if (!map.has(m))
                        {
                            tmp = [];
                        }
                    else {
                           tmp = map.get(m);
                       };
                    tmp.push({
                            key: tmp.length,
                            date: begind[1] + '月' + begind[2] + '日',
                            content: data.goal[i].goalTitle + '  ---开始',
                    });
                    map.set(m,tmp);

                    m = parseInt(endd[0]) + '年' + parseInt(endd[1]) + '月';

                    if (!map.has(m))
                        {
                            tmp = [];
                        }
                    else {
                           tmp = map.get(m);
                       };
                    tmp.push({
                            key: tmp.length,
                            date: endd[1] + '月' + endd[2] + '日',
                            content: data.goal[i].goalTitle + '  ---结束',
                    });
                    map.set(m,tmp);
                };


                //创建渲染数组
                for (var i = 0; i < 36; ++i) {
                    let txt;
                    if (i < 12)
                        txt = (day.getFullYear() - 1) + '年' + ((i + 1) % 13) + '月';
                    else if (i < 24)
                        txt = day.getFullYear() + '年' + ((i - 11) % 13) + '月';
                    else
                        txt = (day.getFullYear() + 1) + '年' + ((i - 23) % 13) + '月';
                    let content = [];

                    if (map.has(txt))
                    {
                        datas.push({
                        key: txt,
                        data: map.get(txt),
                    });
                    }
                };

                
                this.setState
                ({
                    datas: datas,
                });
                console.log(this.state.datas);
            })
          
        
    };

    render() {

        return (
            <View style={{
                flex: 1
            }}>
        <SectionList
            renderSectionHeader={this._sectionComp}
            renderItem={this._renderItem}
            sections={this.state.datas}
            ItemSeparatorComponent={() => <View><Text></Text></View>}
            />
      </View>
        );
    }

}

const styles = StyleSheet.create({

});

export default TimeAxisScreen;